<template>
  <div>
    <el-divider content-position="left">自动清理</el-divider>
    <div class="box">
      <div class="cleanData leading-[40px]">功能说明</div>
      <div class="cleanData leading-[40px]">操作</div>
    </div>
    <div class="box mt-[-1px]">
      <div class="cleanData leading-[50px]">
        <span class="text-[red]">*</span> 是否开启数据清理
      </div>
      <div class="cleanData leading-[50px]">
        <el-radio-group v-model="cleanup" class="ml-4 mt-1">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="cleanData leading-[50px]">
        <span class="text-[red]">*</span> 告警数据保留天数
      </div>
      <div class="cleanData leading-[50px]">
        <el-input v-model="alarmDay" autocomplete="off" />
      </div>
    </div>
    <el-button type="primary" style="margin: 16px 0 15px" @click="save"
      >保存设置</el-button
    >
    <el-divider content-position="left">手动清理</el-divider>
    <div style="display: flex; align-items: center">
      <el-button type="primary" @click="dialogVisible = true"
        >清理数据</el-button
      >
      <div class="ml-[15px]">点击按钮手动清理数据</div>
    </div>
    <el-dialog v-model="dialogVisible" width="20%" top="30vh">
      <template #header="{ titleId, titleClass }">
        <div class="flex items-center">
          <h4 :id="titleId" :class="titleClass">手动清理数据</h4>
        </div>
      </template>
      <div class="ml-1 text-[red]">提示：数据一旦清理无法恢复，请谨慎操作</div>
      <div class="flex mt-3 items-center">
        <div class="ml-1 text-base">告警数据保留天数：</div>
        <el-input v-model="days" style="width: 180px" />
      </div>
      <div class="flex justify-between">
        <div />
        <div class="mt-[15px]">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="manualCleanup"> 确定 </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  getDataCleaning,
  editDataCleaning,
  deleteAlarmData
} from "@/api/system";
import { ElMessage } from "element-plus";
const alarmDay = ref<number>(60);
const cleanup = ref<boolean>(true);
const dialogVisible = ref<boolean>(false);
const days = ref<number>(10);
const getData = async () => {
  const res = (await getDataCleaning()).result;
  cleanup.value = res.open_cleanup;
  alarmDay.value = res.cleanup_days;
};
onMounted(() => {
  getData();
});
const manualCleanup = async () => {
  const res = await deleteAlarmData({ days: Number(days.value) });
  if (res.code === 0) {
    dialogVisible.value = false;
    ElMessage({
      message: "清理成功",
      type: "success"
    });
  } else {
    ElMessage.error(res.message);
  }
};
const save = async () => {
  const res = await editDataCleaning({
    open_cleanup: cleanup.value,
    cleanup_days: Number(alarmDay.value)
  });
  if (res.code === 0) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-divider--horizontal {
  margin: 8px 0 22px;
}

::v-deep .el-dialog__body {
  padding: 0 20px 20px;
}

.cleanData {
  width: 200px;
  padding: 0 10px;
  font-size: 14px;
  border-right: 1px solid #e4e7ed;
}

.box {
  display: flex;
  border: 1px solid #e4e7ed;
}
</style>
